<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
        <!-- 页面5秒刷新一次 -->
        <!--<meta http-equiv="refresh" content="5">-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="author" content="test">
        <meta name="description" content="test">
        <meta name="keywords" content="test,test,test">
        <style>
            .container{
                width: 100%;
                height: 800px;
                box-sizing: border-box;
                overflow: hidden;
                border: dashed 4px pink;
                position: relative;
            }
            .animation{
                width: 100px;
                height: 100px;
                background: #fff;
                border: solid 1px #ccc;
                position: relative;
                animation: myanimation 4s ease 2s infinite;
                -webkit-animation: myanimation 4s ease 2s infinite;
                -moz-animation: myanimation 4s ease 2s infinite;
                -o-animation: myanimation 4s ease 2s infinite;
            }

            @keyframes myanimation {
                0%{
                    background: red;
                    left: 0%;
                    top: 0%;
                }
                25%{
                    background: red;
                    left: 25%;
                    top: 25%;
                }
                50%{
                    background: yellow;
                    left: 50%;
                    top: 50%;
                }
                75%{
                    background: blue;
                    left: 75%;
                    top:75%
                }
                100%{
                    background: green;
                    left: 100%;
                    top: 100%;

                }
            }
            @-webkit-keyframes myanimation {
                0%{
                    background: red;
                    left: 0%;
                    top: 0%;
                }
                25%{
                    background: red;
                    left: 25%;
                    top: 25%;
                }
                50%{
                    background: yellow;
                    left: 50%;
                    top: 50%;
                }
                75%{
                    background: blue;
                    left: 75%;
                    top:75%
                }
                100%{
                    background: green;
                    left: 100%;
                    top: 100%;
                }
            }
            @-moz-keyframes myanimation {
                0%{
                    background: red;
                    left: 0%;
                    top: 0%;
                }
                25%{
                    background: red;
                    left: 25%;
                    top: 25%;
                }
                50%{
                    background: yellow;
                    left: 50%;
                    top: 50%;
                }
                75%{
                    background: blue;
                    left: 75%;
                    top:75%
                }
                100%{
                    background: green;
                    left: 100%;
                    top: 100%;
                }
            }

        </style>

    </head>
    <body>
        <div class="container">
            <div class="animation"></div>
        </div>
    </body>
</html>

